<template>
  <div class="container-page container-page-project">
    <el-form ref="form" :model="form" label-position="right" label-width="80px" size="mini">
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="图片">
        <itemUploadPoster @getPoster="getPoster" />
      </el-form-item>
      <el-form-item label="类型">
        <el-input :disabled="true" :value="form.type | type" />
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="form.description" />
      </el-form-item>
      <el-form-item label="标签">
        <itemTags :type="$route.meta.type" @chekced="chekcedHandlerTag" />
      </el-form-item>
      <el-form-item label="出品方">
        <el-tag v-for="(temp,index) in procucers" :key="index" closable size="mini" @close="handlerClose(temp.tag)">{{ temp }}</el-tag>
        <span v-if="procucers.length<6">
          <el-input v-if="inputVisible" ref="saveTagInput" v-model="inputValue" maxlength="20" class="input-new-tag" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" />
          <el-button v-else class="button-new-tag el-icon-plus" size="mini" @click="showInput" />
        </span>
      </el-form-item>
      <el-form-item label="链接地址">
        <el-input v-model="form.href" />
      </el-form-item>
      <el-form-item label="点击量">
        <el-input-number v-model="form.hit" :min="0" :max="748943649" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// api
import { createProject, getProject, updateProject } from '@/api/miva';
// item
import itemUploadPoster from '@/components/miva-item/item-upload-poster';
import itemTags from '@/components/miva-item/item-tags';
export default {
  components: {
    itemUploadPoster,
    itemTags
  },
  filters: {
    type(key) {
      const obj = {
        1: 'H5项目',
        2: '长图项目',
        3: '海报项目',
        4: '视频项目',
        5: '专题'
      };
      return obj[key];
    }
  },
  data() {
    return {
      form: {
        title: '',
        poster: '',
        type: '',
        description: '',
        tag: '',
        procucer: '',
        href: '',
        hit: ''
      },
      // 出品方组
      procucers: [],
      inputVisible: false,
      inputValue: ''
    };
  },
  computed: {
    nowType() {
      return this.$route.meta.type;
    },
    nowProjectID() {
      return this.$route.query.id;
    }
  },
  async mounted() {
    this.form.type = this.$route.meta.type;
    console.log(this.nowProjectID);
    if (this.nowProjectID) {
      await this.getProject();
    } else {
      await this.clearBuffer();
    }
  },
  methods: {
    // 清空buffer数据
    async clearBuffer() {
      this.$store.commit('unmcc/SETTING_TAG_BUFFER', []);
      this.$store.commit('unmcc/SETTING_POSTER_BUFFER', []);
    },
    // 获取单个项目数据
    async getProject() {
      const { data } = await getProject({ id: this.nowProjectID });
      console.log(data);
      this.form.title = data.title;
      this.form.description = data.description;
      this.form.href = data.href;
      this.form.hit = data.hit;
      // 出品方
      this.form.procucer = data.procucer;
      this.procucers = data.procucer.split(',');
      // 标签
      this.form.tag = data.tag_id;
      this.$store.commit('unmcc/SETTING_TAG_BUFFER', data.tag_id);
      // 海报
      this.form.poster = data.poster_id;
      const arr = [];
      for (const key in data.poster_id.split(',')) {
        arr.push({
          id: data.poster_id.split(',')[key],
          img: data.poster.split(',')[key]
        });
      }
      this.$store.commit('unmcc/SETTING_POSTER_BUFFER', arr);
    },
    // 提交数据
    async submit() {
      console.log(this.form);
      let isComplete = true;
      if (this.nowProjectID) {
        console.log('修改项目');
        isComplete = await this.updateProject();
      } else {
        console.log('添加项目');
        isComplete = await this.createProject();
      }
      console.log(isComplete);
      if (isComplete) {
        this.$router.replace({ path: '/' });
      }
    },
    // 添加项目
    async createProject() {
      const res = await createProject({ data: this.form });
      if (res.error) {
        res.error.reverse();
        for (const val of res.error) {
          this.$message.error(val.message);
        }
        return false;
      }
      this.$notify({
        title: '提示',
        message: res.message,
        offset: 60
      });
      return true;
    },
    // 修改项目
    async updateProject() {
      const res = await updateProject({
        id: this.nowProjectID,
        data: this.form
      });
      console.log(res);
      if (res.code !== 200) {
        return false;
      }
      this.$notify({
        title: '提示',
        message: res.message,
        offset: 60
      });
      return true;
    },
    // 获取海报id数据
    getPoster(poster) {
      this.form.poster = poster.toString();
    },
    // 选择标签
    chekcedHandlerTag(data) {
      this.form.tag = data;
    },
    // 删除出品方
    handlerClose(procucers) {
      this.procucers.splice(this.procucers.indexOf(procucers), 1);
    },
    // 显示出品方输入框
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 添加出品方标签
    handleInputConfirm() {
      const inputValue = this.inputValue;
      if (inputValue) {
        this.procucers.push(inputValue);
      }
      const arr = [];
      for (const val of this.procucers) {
        arr.push(val);
      }
      this.form.procucer = arr.toString();
      this.inputVisible = false;
      this.inputValue = '';
    }
  }
};
</script>

<style lang="scss" scoped>
.container-page-project {
  .item {
    &-poster {
      display: flex;
    }
    &-card-tags {
      margin: 10px;
      margin-left: 0;
    }
  }
}
</style>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 22px;
  line-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 12px;
}
.input-new-tag {
  width: 90px;
  box-sizing: border-box;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
